<template>
	<div class="gallery-header">
		<div class="g-h-l">
			<div class="g-h-l-avatar">
				<img class="g-h-l-img" :src="GalleryAvatar" />
			</div>
			<div class="g-h-l-user">
				<p class="g-h-l-p-user">
					{{GalleryUser}}
				</p>
				<p class="g-h-l-p-fans">
					{{GalleryFans}}
					粉丝
				</p>
			</div>
			
		</div>
		<div class="g-h-r">
			<div class="g-h-r-focus">
				关注
			</div>
			<span class="iconfont g-h-r-more">
				&#xe748;
			</span>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'picture-header',
		props: {
			GalleryAvatar: String,
			GalleryUser: String,
			GalleryFans: String
		}
	}
</script>

<style lang="stylus" scoped>
	@import '~stylus/glo.styl'
	.gallery-header
		width:750px
		height:90px
		position:fixed
		top:0
		left:50%
		margin-left:-375px
		padding:20px 0 0 4px
		display:flex
		flex-direction:row
		.g-h-l
			width:72%
			height:90px	
			color:#fff
			display:flex
			flex-direction:row
			.g-h-l-avatar
				width:70px
				height:70px
				background:#ccc
				margin:10px 0 0 20px
				display:inline-block
				border-radius:50%
				overflow:hidden
				.g-h-l-img
					width:100%
			.g-h-l-user
				width:400px
				height:90px
		
				padding-left:20px
				.g-h-l-p-user
					display:block
					display: -webkit-box
					-webkit-line-clamp: 1
					overflow:hidden
					text-overflow:ellipsis
					-webkit-box-orient: vertical
					width:380px
					font-weight:bold
					font-size:30px
					margin-top:16px
				.g-h-l-p-fans
					font-weight:normal
					margin-top:4px
					font-size:24px
		.g-h-r
			width:28%
			height:90px
			display:flex
			align-items:center
			.g-h-r-focus
				padding:12px 26px
				background:$public_thems_color
				color:#fff
				border:none
				border-radius:6px
				font-size:30px
				display:inline-block
				margin-right:34px
			.g-h-r-more
				font-size:38px
				color:#fff
</style>
